<template>
  <el-dialog
    v-model="show"
    class="dialog"
    destroy-on-close
    append-to-body
    :fullscreen="p.isfullScreen"
    :width="p.isfullScreen ? '100%' : p.width"
    :style="p.isfullScreen ? '' : 'height:' + p.height"
    :title="p.title"
    draggable
    @before-close="show = false"
  >
    <div class="wrape" ref="container">
      <iframe
        class="iframe"
        :src="p.src"
        style="width: 100%; height: 100%; border-width: 0; margin: 0 auto"
      ></iframe>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, watch, shallowRef, defineExpose } from "vue";

const p = defineProps({
  title: {
    type: String,
    default: "弹窗标题",
  },
  src: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "40%",
  },
  height: {
    type: String,
    default: "60%",
  },
  isfullScreen: {
    type: Boolean,
    default: false,
  },
});

let show = ref(false);
const openDialog = () => {
  show.value = true;
};
defineExpose({ openDialog });
</script>

<style lang="scss" scoped>
.wrape {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  @media screen and (min-width: 100px) {
    .iframe {
      width: 100%;
      height: 100%;
      border-width: 0;
      transform: scaleY(1) translateY(-60px);
    }
  }

  @media screen and (min-width: 3000px) {
    .iframe {
      width: 100%;
      height: 100%;
      border-width: 0;
      margin: 0 auto;
      transform: scaleY(1.1) scaleX(1.1) translateY(-25px) translateX(100px);
    }
  }
  @media screen and (min-width: 1920px) {
    .iframe1 {
      width: 100%;
      height: 100%;
      border-width: 0;
      transform: scaleY(1.1) translateY(-80px);
    }
  }
  @media screen and (min-width: 100px) {
    .iframe1 {
      width: 100%;
      height: 100%;
      border-width: 0;
      transform: scaleY(1) translateY(-40px);
    }
  }

  @media screen and (min-width: 3000px) {
    .iframe1 {
      width: 100%;
      height: 100%;
      border-width: 0;
      transform: scaleX(1.3) translateY(-50px);
    }
  }
}
</style>
<style lang="scss" >
@media screen and (min-width: 0px) {
  .dialog {
    margin-top: 120px;
  }
}
@media screen and (min-width: 3000px) {
  .dialog {
    margin-top: 100px;
  }
}
.dialog {
  background-color: rgba(8, 38, 90, 0.91);
  // margin-top:5vh;
  // .el-dialog__header{
  //   height: 20px;
  // }
  .el-dialog__title {
    padding-top: 0px;
    color: rgb(201, 228, 255);
    font-size: 20px;
  }
  .el-dialog__close {
    font-size: 25px;
    color: rgb(201, 228, 255);
  }
  .el-dialog__body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: calc(100% - 55px);
    background-color: rgba(1, 0, 7, 0.467);
  }
  // .el-dialog__headerbtn{ z-index: 99999;}
  // .iframe{
  //   transform:scale(1.5, 1)
  // }
}
</style>